<template>
    <div v-loading="loading">
        <keyHeader ref="keyHeader" :data="data" :keyType="keyType"></keyHeader>
        <div class="string-viewType">
            <el-select v-model="viewType" :placeholder="$t('aside.pleaseChoose')" @change="viewFormat">
                <el-option
                v-for="item in viewTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="string-value">
            <editor v-model="stringInfo.content" :options="options" @init="editorInit" :lang="viewType" theme="chrome" style="font-size:13px;">
            </editor>
        </div>
        <el-button type="primary" icon="el-icon-check" style="margin-top:10px;" @click="setContent">{{$t('aside.save')}}</el-button>
    </div>
</template>

<script>
import keyHeader from './keyHeader'
export default {
    components:{
        editor:require('vue2-ace-editor'),keyHeader
    },
    props:["data","keyType"],
    data(){
        return {
            viewType:"text",
            viewTypes:[
                {label:"text",value:"text"},
                {label:"json",value:"json"}
            ],
            options:{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                tabSize:0,
                wrap:"free",
                showPrintMargin:false
            },
            stringInfo:{
                content:''
            },
            loading:false
        }
    },
    created(){
        this.init();
    },
    methods:{
        editorInit(){
            require('brace/mode/text')
            require('brace/mode/json')
            require('brace/theme/chrome')
            require('brace/ext/language_tools')
        },
        //格式化
        viewFormat(type){
            if(type==="json"){
                try{
                    this.stringInfo.content=JSON.stringify(JSON.parse(this.stringInfo.content), null, 2);
                }catch(e){
                    return false;
                }
            }
            if(type==="text"){
                try{
                    this.stringInfo.content=JSON.stringify(JSON.parse(this.stringInfo.content), null, 0);
                }catch(e){
                    return false;
                }
            }
        },
        //页面初始化
        init(){
            this.viewType="text";
            this.getContent();
        },
        //获取内容
        getContent(){
            this.loading=true
            this.data.redisClient.get(this.data.key).then((res)=>{
                this.stringInfo.content=res===null?'':res
                this.loading=false
            }).catch((e)=>{
                this.loading=false
                this.$message.error({
                    message:e.message
                })
            })
        },
        //修改内容
        setContent(){
            if(this.viewType==='json'){
                this.stringInfo.content=JSON.stringify(JSON.parse(this.stringInfo.content), null, 0)
                this.viewType='text'
            }
            this.data.redisClient.set(this.data.key,this.stringInfo.content).then((res)=>{
                if(res==="OK"){
                    this.$message.success({
                        message:this.$t('publicFeedback.saveSuccess')
                    })
                    if(this.data.type==="addKey"){
                        this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"add",key:this.data.key})
                        this.$eventBus.$emit("reloadKeyWindow",{client:this.data.redisClient})
                        this.$refs.keyHeader.init();
                    }
                }
            }).catch((e)=>{
                this.$message.error({
                    message:e.message
                })
            })
        }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        }
    }
}
</script>

<style scoped>
.string-value{
    height: 600px;
    width: 90%;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    overflow: hidden;
}
.string-viewType{
    margin: 20px 0px;
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar{
    width : 5px;
    height: 1px;
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar-thumb{
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%, 
    transparent);
}
.ace_editor >>> .ace_scrollbar::-webkit-scrollbar-track{
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}
</style>